<template>
	<div class="login-swiper">
		<div class="login-pid">
			<h3>千锋后台管理系统</h3>
			<el-form :model="loginform" :rules="rules" ref="loginform">
				<el-form-item prop="username">
					<el-input v-model="loginform.username"></el-input>
				</el-form-item>
				<el-form-item prop="pwd">
					<el-input v-model="loginform.pwd"></el-input>
				</el-form-item>
			</el-form>
			<el-button type="warning" @click="submitForm('loginform')">登录</el-button>
			<div class="wxts">
				<p>温馨提示</p>
				<p>用户名为：admin/user</p>
				<p>密码为：123456</p>
			</div>
		</div>
	</div>
</template>

<script>
import request from "../api/login";
import { getToken, setToken, removeToken } from "../utils/cookieUtils";
export default {
	data() {
		return {
			loginform: {
				username: "",
				pwd: "",
			},
			rules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
					{ min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
				],
				pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					request.login(this.loginform).then((res) => {
						if (res.code == 200 && res.success == 0) {
							//cookie保存token
							setToken("token", res.data.token);
							//请求头添加token
							//跳转首页
							this.$router.push("/");
						} else {
							alert("账户密码错误");
						}
					});
				} else {
					console.log("账户密码错误，请重新输入");
					return false;
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
.login-swiper {
	width: 100%;
	height: 100%;
	background: url("../assets/bg9.jpg") center center;
	background-size: 100% 100%;
	.login-pid {
		width: 400px;
		height: 350px;
		background: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 10px;
		padding: 0 20px;
		h3 {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
		/deep/.el-button {
			width: 100%;
		}
		.wxts {
			font-size: 12px;
			color: green;
			line-height: 20px;
		}
	}
}
</style>
